<script setup lang="ts">
import CoordinateDrawLine from "./packages/coordinate-draw-iine/coordinate-draw-line.vue";
import { Line, LineStyle, Point } from "./packages/coordinate-draw-iine/coordinate-draw-line.ts";
import { onMounted, ref } from "vue";
import Color from "color";

const coordRef = ref();

const addLine = () => {
  const dull = ["increase", "decrease", undefined][Math.floor(Math.random() * 3)];
  const start = new Point(0, 0);
  const end = new Point(255, 100);
  if (dull === "decrease") {
    start.y = 100;
    end.y = 0;
  }
  coordRef.value.addLine(
    new Line(start, end).setDull(dull as any).setStyle(
      new LineStyle()
        .setStrokeStyle(
          Color.rgb(Math.random() * 255, Math.random() * 255, Math.random() * 255)
            .darken(0.5)
            .string(),
        )
        .setLineWidth(1),
    ),
  );
};
onMounted(() => {});

const onChanging = (point: Point | null, lines: Line[]) => {
  console.log(point, lines);
};

const xEnd = ref(255);
</script>

<template>
  <div class="">
    <a-space>
      <a-button @click="addLine">添加线条</a-button>
      <a-button @click="coordRef.clearLines()">清空</a-button>
      <a-button @click="xEnd = Math.floor(Math.random() * 1000 + 100)">修改</a-button>
    </a-space>
  </div>
  <div class="" style="margin-top: 30px; height: 480px; width: 100%">
    <coordinate-draw-line
      ref="coordRef"
      style="background-color: #fff"
      @changed="onChanging"
      :x-end="xEnd"
      :y-end="100"
    />
  </div>
</template>

<style scoped lang="less">
.container {
  background-color: #f0f0f0;
}
</style>
